<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/first.css" />
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light m-0 p-0">
			<div class="container">
				<a class="navbar-brand" href="#">后台管理</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
						
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
				  <ul class="ul-nav navbar-nav mr-auto">
				    <li class="nav-item active navActive">
				      <a class="nav-link" href="#">后台首页</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link" href="./second.html">用户管理</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link " href="./third.html">内容管理</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link"  href="./fourth.html">标签管理</a>
				    </li>
				  </ul>
				  <ul class="navbar-nav ml-auto">
					  <li class="nav-item dropdown ">
					    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
					      admin
					    </a>
					    <div class="dropdown-menu">
					      <a class="dropdown-item" href="#">Action</a>
					      <a class="dropdown-item" href="#">Another action</a>
					      <div class="dropdown-divider"></div>
					      <a class="dropdown-item" href="#">Something else here</a>
					    </div>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link " href="">退出</a>
					  </li>
				  </ul>
				  <!-- <form class="form-inline my-2 my-lg-0">
				    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
				    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				  </form> -->
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="col-md-12 col-lg-12 col-sm-12 pl-0 pr-0">
				<div class="alert alert-danger mt-3 mb-3 border-success alert-dismissible fade show" role="alert">
				  <h4 class="mb-3">网站程序有漏洞，急需修复！</h4>
				  <p class="mt-2 mb-2">当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即刻修复！</p>
				  <button class="btn btn-danger border-dark border-2">
						立即修复
				  </button>
				  <button class="btn btn-light border-secondary border-2">
						稍后处理
				  </button>
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				    <span aria-hidden="true">&times;</span>
				  </button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-lg-6 col-sm-6">
					<div class="card w-100" style="width: 18rem;">
					  <div class="card-header">
					    网站数据统计
					  </div>
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item pt-2 pb-4 pl-2">
							<ul class="ul-txet list-group list-group-flush">
								<li class="list-group-item d-flex justify-content-between border-bottom border-2">
									<span>统计项目</span>
									<span class="align-self-auto">今日</span>
									<span>昨日</span>
								</li>
								<li class=" d-flex justify-content-between list-group-item border-bottom pt-2 pb-2">
									<span>注册会员</span>
									<span>200</span>
									<span>400</span>
								</li>
								<li class=" d-flex justify-content-between list-group-item border-bottom pt-2 pb-2">
									<span>登陆会员</span>
									<span>4100</span>
									<span>5112</span>
								</li>
								<li class=" bg-light d-flex justify-content-between list-group-item border-bottom pt-2 pb-2">
									<span>今日发帖</span>
									<span>1540</span>
									<span>4511</span>
								</li>
								<li class=" d-flex justify-content-between list-group-item pt-2 pb-2">
									<span>转载次数</span>
									<span >150</span>
									<span>110</span>
								</li>
							</ul>
						</li>
					  </ul>
					</div>
				</div>
				<div class="col-md-6 col-lg-6 col-sm-6">
					<div class="card w-100" style="width: 18rem;">
					  <div class="card-header">
					    网站热帖
					  </div>
					  <ul class="wt-text list-group list-group-flush">
					    <li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>
					    <li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>
					    <li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>
						<li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>
						<li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>
						<li class="list-group-item pt-2 pb-2 d-flex justify-content-between">
							<span><a href="">泛Mooc职业教育，效果和就业为王</a></span>
							<span><a href="">2015/08/08</a></span>
						</li>

					  </ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 col-md-6 col-sm-6 mt-2">
					<div class="card w-100" style="width: 18rem;">
					  <div class="card-header">
					    Featured
					  </div>
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item">
							<img class="img-thumbnail" src="./img/data.png" alt="" />
						</li>
					  </ul>
					</div>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 mt-2">
					<div class="card w-100" style="width: 18rem;">
					  <div class="card-header">
					    Featured
					  </div>
					  <ul class="list-group list-group-flush">
					    <li class="jd-text list-group-item">
							<div class="mt-2 mb-3">内容使用率：40%</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 40%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
							<div class="mt-3 mb-3">数据库使用率：20%</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
							<div class="mt-3 mb-3">磁盘使用率：60%</div>
							<div class="progress">
							  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
							<div class="mt-3 mb-3">CPU使用率：80%</div>
							<div class="progress mb-2">
							  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</li>
					  </ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12">
					<div class="card w-100" style="width: 18rem;">
					  <div class="card-header">
					    Featured
					  </div>
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item">
							<div class="row">
								<div class="col-lg-7">
									<div class="card w-100 mt-3 mb-3" style="width: 18rem;">
									  <div class="card-header d-flex">
									    <img class="mt-2 mb-2" style="width: 60px;" src="./img/a.png" alt="" />
										<div>
											<p class="mt-0 mb-1">卓大哥</p>
											<p class="mb-1" style="font-size: 12px;">
												技术大哥今晚把网站程序升级一下哈，现在系统有漏洞，安全起见！
											</p>
										</div>
									  </div>
									</div>
									<div class="card w-100 mt-3 mb-3" style="width: 18rem;">
									  <div class="card-header d-flex justify-content-end">
										  <div>
											<p class="mt-1 mb-1" style="text-align: end;">技术大哥</p>
											<p class="mb-1" style="font-size: 12px;">
												收到，今晚凌晨2两点准时升级！
											</p>
										  </div>
 									    <img class="mt-2 mb-2" style="width: 60px;" src="./img/b.png" alt="" />
									  </div>
									</div>
									<div class="card w-100 mt-3 mb-3" style="width: 18rem;">
									  <div class="card-header d-flex justify-content-end">
										  <div>
										  	<p class="mt-1 mb-1" style="text-align: end;">技术大哥</p>
										  	<p class="mb-1" style="font-size: 12px;">
										  		你先在站点发布一下通知哈！
										  	</p>
										  </div>
									    <img class="mt-2 mb-2" style="width: 60px;" src="./img/b.png" alt="" />
										
									  </div>
									</div>
									<div class="card w-100 mt-3 mb-3" style="width: 18rem;">
									  <div class="card-header d-flex ">
										 
									    <img class="mt-2 mb-2" style="width: 60px;" src="./img/a.png" alt="" />
										<div>
											<p class="mt-1 mb-1">卓大哥</p>
											<p class="mb-1" style="font-size: 12px;">
												好嘞。
											</p>
										</div>
									  </div>
									</div>
								</div>
								<div class="col-lg-5">
									<div class="form-group">
									    <label for="exampleFormControlTextarea1">Example textarea</label>
									    <textarea class="form-control" placeholder="请输入留言内容" id="exampleFormControlTextarea1" rows="3"></textarea>
									</div>
									<button type="button" class="btn btn-light border">留言</button>
									<div class="card w-100 mt-3" style="width: 18rem;">
									  <div class="card-header">
									    团队联系手册
									  </div>
									  <ul class="list-group list-group-flush">
									    <li class="list-group-item">
											<div class="card w-100 mb-3" style="width: 18rem;">
											  <ul class="list-group list-group-flush">
											    <li class="list-group-item">站长(李小龙)：13134848615</li>
											    <li class="list-group-item">技术(大牛哥)：13134848615</li>
											    <li class="list-group-item">推广(张二哥)：13134848615</li>
												<li class="list-group-item">客服(王女士)：13134848615 028-888888</li>
											  </ul>
											</div>
										</li>
									    
									  </ul>
									</div>
								</div>
							</div>
						</li>
					  </ul>
					</div>
				</div>
			</div>
			
			
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
	</body>	
	</html>